<style lang="less" scoped>
.reportTable {
  background: #e8f0f0;
  padding: 15px 15px 30px 15px;
}
.formItem {
  width: 200px;
}
.mr30 {
  margin-right: 30px;
}
</style>
<template>
    <div class="reportTable">
        <Form :model="searchItem">
            <Input v-model="searchItem.river_name" :maxlength="20" class="formItem mr30" placeholder="请输入河流名称"></Input>
            <Select clearable v-model="searchItem.solve_is" placeholder="请选择事件状态" class="formItem mr30">
                <Option value="处理中">处理中</Option>
                <Option value="已处理">已处理</Option>
            </Select>
            <Select v-model="searchItem.areas" filterable clearable class="formItem mr30" placeholder="请选择地区">
                <Option v-for="item in areaList" :value="item.name" :key="item.name">{{ item.name }}</Option>
            </Select>
            <DatePicker type="date" placeholder="选择开始时间" :value="searchItem.start_time" @on-change="change" format="yyyy-MM-dd" class="mr30 formItem"></DatePicker>
            <DatePicker type="date" placeholder="选择结束时间" :value="searchItem.end_time" @on-change="change2" format="yyyy-MM-dd" class="mr30 formItem"></DatePicker>
            <Checkbox v-model="searchItem.is_multiple">是否为超时事件(需要选择事件状态为处理中)</Checkbox>
            <Button type="info" @click="getReport()">搜索</Button>
        </Form>
        <Table ref="table" style="margin-top: 15px" :data="reportData" :columns="reportColumns" stripe></Table>
        <Page
            class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            ref="page"
            size="small"
            show-total
            @on-change="changePage"
        ></Page>
    </div>
</template>
<script>
import { ajaxPost } from 'global/axios'
import storage from 'good-storage'
export default {
  data () {
    return {
      searchItem: {
        is_multiple: false,
        areas: '',
        solve_is: '',
        river_name: '',
        start_time: '',
        end_time: ''
      },
      areaList: [],
      reportData: [],
      reportColumns: [
        {
          title: '举报编号',
          key: 'report_no'
        },
        {
          title: '河名',
          key: 'river_name'
        },
        {
          title: '状态',
          key: 'solve_is'
        },
        {
          title: '举报时间',
          key: 'report_time'
        },
        {
          title: '受理时间',
          key: 'complete_time'
        },
        {
          title: '已处理时间',
          key: 'solve_time'
        },
        {
          title: '负责河长',
          key: 'realname'
        },
        {
          title: '事件来源',
          key: 'come'
        },
        {
          title: '事件上报人',
          key: 'contacts'
        },
        {
          title: '描述',
          key: 'overview',
          width: 200
        }
      ],
      Page: {
        current: 1,
        pageSize: 16,
        total: 0
      }
    }
  },
  methods: {
    change (data) {
      this.searchItem.start_time = data
    },
    change2 (data) {
      this.searchItem.end_time = data
    },
    getReport (page = 1) {
      let params = {
        data: {
          searchValue: {},
          page: page,
          pageSize: this.Page.pageSize,
          order: { report_time: -1 }
        },
        url: '/emergency/report/overtlist',
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish()
          this.reportData = res.data.result.result
          this.Page.total = res.data.result.totalSize
          this.reportData.map(item => {
            if (item.user_type == '1') {
              item.come = '微信投诉'
            } else if (item.user_type == '2') {
              item.come = '河长事件'
            } else if (item.user_type == '3') {
              item.come = '电话信访'
            }
            if (item.respon_chief) {
              item.realname = item.respon_chief.realname
            } else {
              item.realname = '暂无数据'
            }
          })
        }
      }
      if (this.searchItem.is_multiple) {
        let today = new Date().format('yyyy-MM-dd')
        params.data.searchValue.plan_time = `${today}|#|lt`
      }
      if (this.searchItem.solve_is !== '') {
        params.data.searchValue.solve_is = this.searchItem.solve_is
      }
      if (this.searchItem.start_time !== '') {
        params.data.searchValue.report_time = `${
          this.searchItem.start_time
        } 00:00:00|#|gte`
        if (this.searchItem.end_time !== '') {
          params.data.searchValue.report_time = `${
            this.searchItem.start_time
          } 00:00:00|#|${this.searchItem.end_time} 23:59:59`
        }
      }
      if (this.searchItem.end_time !== '') {
        params.data.searchValue.report_time = `${
          this.searchItem.end_time
        } 23:59:59|#|lte`
        if (this.searchItem.start_time !== '') {
          params.data.searchValue.report_time = `${
            this.searchItem.start_time
          } 00:00:00|#|${this.searchItem.end_time} 23:59:59`
        }
      }
      if (this.searchItem.areas !== '') {
        this.areaList.map(item => {
          if (this.searchItem.areas === item.name) {
            if (item.level == '2') {
              params.data.searchValue['location.area'] = item.name
            } else if (item.level == '3') {
              params.data.searchValue['location.town'] = item.name
            }
          }
        })
      }
      if (this.searchItem.river_name !== '') {
        params.data.searchValue.river_name = `${
          this.searchItem.river_name
        }|#|like`
      }
      ajaxPost(params)
    },
    getArea () {
      let params = {
        data: {
          basis: 2,
          fieldName: ['name', 'level'],
          searchValue: { level: '3|#|lte' },
          order: { level: 1 }
        },
        url: '/law/city/list',
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish()
          this.areaList = res.data.result.result
        }
      }
      ajaxPost(params)
    },
    changePage (data) {
      this.getReport(data)
    }
  },
  mounted: function () {
    this.getArea()
    this.getReport()
  }
}
</script>
